<template>
  <div class="app-container">
    <!-- form行 -->
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="search_form.hospitalName" placeholder="请输入医院名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-select v-model="search_form.province" placeholder="请选择省份" clearable>
          <el-option
            v-for="item in provinceData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain class="el-icon-search" @click="search">查询</el-button>
        <el-button type="primary" plain class="el-icon-refresh" @click="reset">重置</el-button>
      </el-form-item>
      <el-form-item style="float:right">
        <!-- <el-button type="primary medium" icon="el-icon-plus" @click="add_hospital">添加</el-button> -->
        <el-button
          type="primary medium"
          icon="el-icon-plus"
          @click="toRoutes('addHospitals','','add')"
        >添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <div class="tableWrap">
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <!-- id
        <el-table-column prop="id" label="ID" align="center" />-->
        <el-table-column type="index" label="编号" width="50" align="center" :index="table_index" />
        <!-- 排序 -->
        <el-table-column prop="hospitalName" label="医院名称" align="center" />
        <!-- 医院图标 -->
        <el-table-column label="医院图标" align="center">
          <template slot-scope="scope">
            <div>
              <img :src="common.img_url+scope.row.hospitalIcon" alt class="smallBG" />
            </div>
          </template>
        </el-table-column>
        <!-- 省份 -->
        <el-table-column prop="province" label="省份" align="center" />
        <!-- 地址 -->
        <el-table-column prop="locationDes" label="地址" align="center" />
        <!-- 关联项目 -->
        <el-table-column prop="projectNum" label="关联项目" align="center">
          <template slot-scope="scope">
            <div
              style="color: #409eef; cursor:pointer"
              @click="linkProject(scope.row)"
            >{{scope.row.projectNum}}</div>
          </template>
        </el-table-column>
        <!-- 关联医生 -->
        <el-table-column prop="doctorNum" label="关联医生" align="center">
          <template slot-scope="scope">
            <div
              style="color: #409eef; cursor:pointer"
              @click="linkDoctor(scope.row)"
            >{{scope.row.doctorNum}}</div>
          </template>
        </el-table-column>
        <!--        &lt;!&ndash; 上架状态 &ndash;&gt;-->
        <!--        <el-table-column label="上架状态" align="center">-->
        <!--          <template slot-scope="scope">-->
        <!--            <div>-->
        <!--              <el-switch-->
        <!--                v-model="scope.row.isOn"-->
        <!--                active-text="上架"-->
        <!--                inactive-text="下架"-->
        <!--                :active-value="1"-->
        <!--                :inactive-value="0"-->
        <!--                @change="changeSwitch($event,scope.row)"-->
        <!--              />-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->

        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- toRoutes -->
            <el-button
              type="text"
              size="mini"
              @click="toRoutes('addHospitals',scope.row.id,'edit')"
            >编辑</el-button>
            <!-- <el-button type="text" size="mini" @click="editHos(scope.row)">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        background
        :page-sizes="[10,20,50,100]"
        :page-size="pageSize"
        :pager-count="11"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @current-change="change_page"
        @size-change="handleSizeChange"
      />
    </div>

    <!-- 关联项目 -->
    <el-dialog title="关联项目" :visible.sync="dialogProjectVisible" width="850px">
      <div class="detail project_detail" style="width: 800px ; margin-bottom: 40px">
        <div class="app-container">
          <!-- 表格 -->
          <div class="tableWrap">
            <el-table
              v-loading="projectLoading"
              :data="tableProjectData"
              border
              height="250"
              style="width: 100%"
            >
              <!-- id -->
              <el-table-column
                fixed
                type="index"
                label="序号"
                width="50"
                align="center"
                :index="table_project_index"
              />
              <!-- 医院名称 -->
              <el-table-column prop="hospitalName" label="医院名称" align="center" />
              <!-- 项目ID -->
              <el-table-column prop="id" label="项目ID" align="center" />
              <!-- 项目名称 -->
              <el-table-column prop="groupProjectName" label="项目名称" align="center" />
              <!-- 省份 -->
              <el-table-column prop="provinceName" label="省份" align="center" />
              <!-- 项目医院 -->
              <el-table-column prop="hospitalName" label="项目医院" align="center" />
            </el-table>
          </div>

          <!-- 分页器 -->
          <div class="block">
            <el-pagination
              background
              :current-page="pageProject"
              :page-sizes="[10,20,50,100]"
              :page-size="pageSizeProject"
              :pager-count="11"
              layout="total, sizes, prev, pager, next"
              :total="totalProject"
              @current-change="change_project_page"
              @size-change="handleProjectSizeChange"
            />
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 关联项目 -->
    <el-dialog title="关联医生" :visible.sync="dialogDoctorVisible" width="850px">
      <div class="detail project_detail" style="width: 800px ; margin-bottom: 40px">
        <div class="app-container">
          <!-- 表格 -->
          <div class="tableWrap">
            <el-table
              v-loading="doctorLoading"
              :data="tableDoctorData"
              border
              height="250"
              style="width: 100%"
            >
              <!-- id -->
              <el-table-column
                fixed
                type="index"
                label="序号"
                width="50"
                align="center"
                :index="table_doctor_index"
              />
              <!-- 医院名称 -->
              <el-table-column prop="hospital_name" label="医院名称" align="center" />
              <!-- 医生名称 -->
              <el-table-column prop="doctor_name" label="医生名称" align="center" />
              <!-- 医生职位 -->
              <el-table-column prop="position_cn" label="医生职位" align="center" />
            </el-table>
          </div>

          <!-- 分页器 -->
          <div class="block">
            <el-pagination
              background
              :current-page="pageDoctor"
              :page-sizes="[10,20,50,100]"
              :page-size="pageSizeDoctor"
              :pager-count="11"
              layout="total, sizes, prev, pager, next"
              :total="totalDoctor"
              @current-change="change_doctor_page"
              @size-change="handleDoctorSizeChange"
            />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination";
import { projectList } from "../../api/project";
import { hospitalList } from "../../api/couponList";
import { getHospitalList } from "../../api/hospitalManage";
import { provinceList } from "../../api/province";

export default {
  components: {
    pagination,
  },
  data() {
    return {
      provinceData: [], //省份下拉列表
      search_form: {
        hospitalName: "",
        province: "",
      },
      search_form_dia: {
        hospital_id: 0,
        doctor_id: 0,
      },
      dialogProjectVisible: false,
      dialogDoctorVisible: false,
      status: "",
      showAddMask: false,
      storeLabels: [1, 2, 3],
      tableData: [],
      total: 0, // 分页总数
      pageSize: 10, // 每页显示的总数
      pageNum: 1, // 显示第几页
      detailInfo: {}, // 分类详细信息
      isDisabled: false, // 默认允许是否编辑
      loading: true,
      tableProjectData: [], //项目列表数据
      pageSizeProject: 10, //条数
      pageProject: 1, //当前页
      totalProject: 0, //条数
      pageTalProject: 1, //页数
      projectLoading: false, //项目
      //
      tableDoctorData: [], //项目列表数据
      pageSizeDoctor: 10, //条数
      pageDoctor: 1, //当前页
      totalDoctor: 0, //条数
      pageTalDoctor: 1, //页数
      doctorLoading: false, //项目
    };
  },
  beforeRouteLeave(to, from, next) {
    // const answer = window.confirm("当前页面搜索条件将会被保存");
    //更新 put
    let keyname = this.$route.name;
    let value = JSON.stringify(this.search_form);
    sessionStorage.setItem(keyname, value);
    next();
  },
  mounted() {
    if (sessionStorage.getItem(this.$route.name)) {
      this.search_form = JSON.parse(sessionStorage.getItem(this.$route.name));
    }
    // 获取医院列表
    this.get_hospital_lists();

    this.get_province_list();
  },
  methods: {
    // 序号 -项目
    table_project_index(index) {
      return (this.pageProject - 1) * this.pageSizeProject + index + 1;
    },
    // 序号 -医生
    table_doctor_index(index) {
      return (this.pageDoctor - 1) * this.pageSizeDoctor + index + 1;
    },
    // 序号 -医院
    table_index(index) {
      return (this.pageNum - 1) * this.pageSize + index + 1;
    },
    toRoutes(name, id, type) {
      const route = { path: name, query: { id: id, type: type } };
      this.$router.push(route);
    },
    // 添加
    add_hospital() {
      this.$router.push({
        path: "/add_hospital_new",
        query: {
          page_status: 1,
        },
      });
    },

    // 编辑
    editHos(row) {
      this.$router.push({
        path: "/add_hospital_new",
        query: {
          id: row.id,
          page_status: 2,
        },
      });
      // this.showAddMask = true
      // this.isDisabled = false
      // this.detailInfo = row
    },
    // 向子组件传递
    checkMask(isHidden) {
      this.detailInfo = {};
      this.showAddMask = isHidden;
    },

    //获取项目列表
    get_project_list(
      options = {
        pageNum: this.pageProject,
        pageSize: this.pageSizeProject,
        id: 0,
        groupProjectName: "",
        projectCategoryId: "",
        groupSize: "",
        status: "",
        isRecommend: "",
        provinceId: "", // 如果筛选条件为全国时，传省份id为999
        hospitalName: this.search_form_dia.hospitalName,
      }
    ) {
      this.projectLoading = true;
      projectList(options)
        .then((result) => {
          const res = result.data;
          if (res.code === 0) {
            res.data.list.forEach((item) => {
              item.status = item.status - 0;
            });
            this.tableProjectData = res.data.list;
            this.totalProject = res.data.count;
            this.projectLoading = false;
          }
        })
        .catch((err) => {
          this.projectLoading = false;
          //   this.$message.error('服务器网络错误，请稍后重试');
          this.$message.error(err);
        });
    },
    //筛选-项目
    searchProject() {
      this.get_project_list({
        pageNum: this.pageProject,
        pageSize: this.pageSizeProject,
        id: 0,
        groupProjectName: "",
        projectCategoryId: "",
        groupSize: "",
        status: "",
        isRecommend: "",
        provinceId: "", // 如果筛选条件为全国时，传省份id为999
        hospitalName: "",
        hospitalId: this.search_form_dia.hospital_id,
      });
    },
    // 分页 -项目
    change_project_page(page) {
      this.pageProject = page;
      this.searchProject();
    },
    handleProjectSizeChange(page) {
      this.pageSizeProject = page;
      this.searchProject();
    },

    //获取医生列表
    get_doctor_list(
      options = {
        page: this.pageDoctor,
        pageSize: this.pageSizeDoctor,
        hospital_id: this.search_form_dia.hospital_id,
      }
    ) {
      this.doctorLoading = true;
      hospitalList(options)
        .then((result) => {
          const res = result.data;
          if (res.code === 0) {
            res.data.list.forEach((item) => {
              item.status = item.status - 0;
            });
            this.tableDoctorData = res.data.list;
            this.totalDoctor = res.data.total;
            this.doctorLoading = false;
          }
        })
        .catch((err) => {
          this.doctorLoading = false;
          //   this.$message.error('服务器网络错误，请稍后重试');
          this.$message.error(err);
        });
    },
    //筛选-医生
    searchDoctor() {
      this.get_doctor_list({
        page: this.pageDoctor,
        pageSize: this.pageSizeDoctor,
        hospital_id: this.search_form_dia.hospital_id,
      });
    },
    // 分页 -医生
    change_doctor_page(page) {
      this.pageDoctor = page;
      this.searchDoctor();
    },
    handleDoctorSizeChange(page) {
      this.pageSizeDoctor = page;
      this.searchDoctor();
    },

    //关联项目
    linkProject(item) {
      this.search_form_dia.hospital_id = item.id;
      this.pageProject = 1;
      this.searchProject();
      this.dialogProjectVisible = true;
    },
    //关联医生
    linkDoctor(item) {
      this.search_form_dia.hospital_id = item.id;
      this.pageDoctor = 1;
      this.searchDoctor();
      this.dialogDoctorVisible = true;
    },

    // 获取列表
    get_hospital_lists(
      options = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        hospitalName:
          this.search_form.hospitalName === ""
            ? undefined
            : this.search_form.hospitalName,
        province:
          this.search_form.province === ""
            ? undefined
            : this.search_form.province,
      }
    ) {
      getHospitalList(options)
        .then((res) => {
          this.total = res.data.data.count;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.tableData = res.data.data.list;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error("网络连接错误，请稍后再试");
        });
    },

    // 分页
    change_page(page) {
      this.pageNum = page;
      this.search();
    },
    handleSizeChange(page) {
      this.pageSize = page;
      this.search();
    },

    // 筛选
    search() {
      this.get_hospital_lists({
        hospitalName:
          this.search_form.hospitalName === ""
            ? undefined
            : this.search_form.hospitalName,
        province:
          this.search_form.province === ""
            ? undefined
            : this.search_form.province,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
    },
    // 重置
    reset() {
      // this.pageNum = 1;
      // this.pageSize = 10;
      // this.search_form.hospitalName = "";
      // this.search_form.province = "";
      // this.search();
      this.$router.push('/hospitalList')
    },

    // 获取省份
    get_province_list() {
      provinceList({})
        .then((res) => {
          // this.form.province = res.data.data.list
          this.provinceData = res.data.data.list;
        })
        .catch((res) => {
          this.$message.error("网络连接错误，请稍后再试");
        });
    },
  },
};
</script>
<style lang="less" scoped>
.smallBG {
  width: 100px;
  height: 100px;
}
</style>

